<template>
	<view>

		<!-- 记账操作 -->
		<view class="handleList_box">
			<view class="handleList_con">
				<view class="handleLabel">工地：</view>
				<view class="handleList">
					{{defaultWorksite.project_name}}
				</view>
			</view>
			<view class="handleList_con">
				<view class="handleLabel">日期：</view>
				<view class="handleList">
					{{noteDetail.add_date}}
					<!-- <picker style="width: 100%;" mode="date" :value="date" @change="dateChange">
						<view class="pickerCon">
							<text>{{date}}</text>
							<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
						</view>
					</picker> -->
				</view>
			</view>
			<!-- <view class="handleList_con">
				<view class="handleLabel">天气：</view>
				<view class="handleList">
					{{noteDetail.weather}}
				</view>
			</view> -->
		</view>

		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#F5F5F5"></u-gap>

		<view class="handleList_box">
			
			<view class="handleList_con">
				<view class="handleLabel">天气：</view>
				<view class="handleList">
					<picker style="width: 100%;" mode = 'selector' :value="weatherIndex" :range="rangeWeather" @change="weatherChange">
						<view class="pickerCon">
							<text>{{rangeWeather[weatherIndex]}}</text>
							<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
						</view>
					</picker>
				</view>
			</view>
			
			
			<view class="handleList_con">
				<view class="handleLabel">人员：</view>
				<view class="handleList">
					<view class="pickerCon"
						style="height: auto; line-height: auto; padding: 20rpx; align-content: center;"
						@click="workerClick">
						<text v-if="workerNames">{{workerNames}}</text>
						<text class="placeholderColor" v-else>请选择相关人员</text>
						<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="handleList_con">
				<view class="handleLabel">内容：</view>
				<view class="handleList">
					<view class="textareaCon">
						<textarea :value="remark" @input="remarkIn" placeholder="请输入备注内容"
							placeholder-class="placeholderColor" auto-blur="true" 
							cursor-spacing="100"></textarea>
					</view>
				</view>
			</view>
			<view class="handleList_con">
				<view class="handleLabel">照片：</view>
				<view class="handleList">
					<!-- <view class="photoCon">
						<image :src="cameraUrl" alt="" @click="openUpload"></image>
					</view> -->
					
					<view class="uploadList">
						<view class="uploadItem" v-for="(item, index) in imgList" :key="index"
							v-if="imgList.length >0">
							<image :src="item.url" mode="aspectFill" @click="previewImg(item.url)"></image>
							
						</view>
					</view>
				</view>
			</view>

			<!-- 完成记账 -->
			<u-gap height="152" bg-color="#fff"></u-gap>
			<view class="handlePost_con handleFixed">
				<view class="delBtn" @click="delClick">删除</view>
				<view class="completeBtn" @click="saveClick">保 存</view>
			</view>
		</view>

		<!-- 上传图片组件 -->
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>

	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';

	export default {
		components: {
			Upload
		},
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				id: '',
				noteDetail: {},

				// 选择的工人
				workerNames: '',
				workerIds: '',

				// 备注
				remark: '',

				// 图片
				isUpload: false,
				imgList: [],
				cameraUrl: '/static/camera.png',
				
				// 天气
				weatherData: '晴',
				rangeWeather:['晴','多云','小雨','大雨','风','雪'],
				weatherIndex:0,
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id;
			}
			this.getNoteDetail();
		},
		onShow() {
			var _this = this;
			uni.$on('updateWorker', function(data) {
				console.log(data);
				var workerArray = data;
				var workerNamesArray = [];
				var workerIdsArray = [];
				for (var i = 0; i < workerArray.length; i++) {
					workerNamesArray.push(workerArray[i].userInfo.name);
					workerIdsArray.push(workerArray[i].id);
				}
				_this.workerNames = workerNamesArray.join(',');
				_this.workerIds = workerIdsArray.join(',');
			})
		},
		onReady() {
			// this.getWeather();
		},
		methods: {
			// 预览图片
			previewImg(src) {
				let _this = this;
				// console.log(_this.imgList);
				var current = src;
				var imgList = _this.imgList;
				var imagesUrl = [];
				for (var i = 0; i < imgList.length; i++) {
					imagesUrl[i] = imgList[i].url;
				}
				// console.log(imagesUrl)
				uni.previewImage({
					current: current,
					urls: imagesUrl
				})
			},
			weatherChange(e){
				console.log(e.detail.value)
				this.weatherIndex=e.detail.value;
				this.weatherData=this.rangeWeather[e.detail.value]
			},
			
			
			// 获取备注详情
			getNoteDetail() {
				var _this = this;
				_this.$u.get('/api/project.remark/getDetail', {
					id: _this.id,
				}).then(res => {
					console.log("==获取备注详情==")
					console.log(res)
					var noteDetail = res.data;
					_this.noteDetail = noteDetail;

					// 选择的工人
					_this.workerNames = noteDetail.userName;
					_this.workerIds = noteDetail.member_id;

					// 备注
					_this.remark = noteDetail.remark;

					// 图片
					_this.imgList = noteDetail.imgList;
					_this.cameraUrl = noteDetail.imgUrl;
					
					
					var rangeWeather=_this.rangeWeather;
					for(var i=0;i<rangeWeather.length;i++){
						if(rangeWeather[i]== noteDetail.weather){
							_this.weatherIndex=i;
						}
					}
					
				}).catch(res => {
					console.log(res);
				})
			},

			// 选择日期
			dateChange(e) {
				this.date = e.detail.value;
			},

			// 获取天气预报
			getWeather() {
				var _this = this;
				_this.$u.get('/api/plus.weather/baseMoji', {
					lat: uni.getStorageSync('latitude'),
					lng: uni.getStorageSync('longitude'),
				}).then(res => {
					_this.weatherData = res.data.condition + ' ' + res.data.temp + '°C';
				}).catch(res => {
					console.log(res);
				})
			},

			// 选择工人
			workerClick() {
				uni.navigateTo({
					url: '/pages/worker/selectWorker'
				})
			},

			// 备注输入
			remarkIn(e) {
				this.remark = e.detail.value
			},

			// 打开上传图片
			openUpload() {
				this.isUpload = true;
			},

			// 获取上传的图片
			getImgsFunc(e) {
				let _this = this;
				if (e && typeof(e) != 'undefined') {
					_this.imgList = _this.imgList.concat(e);
					_this.cameraUrl = _this.imgList[0].url;
				}
				_this.isUpload = false;
			},

			// 提交
			saveClick() {
				var _this = this;
				// if (!_this.date) {
				// 	uni.showModal({
				// 		content: '请选择日期',
				// 		showCancel: false,
				// 	})
				// 	return;
				// }

				if (_this.workerIds == '') {
					uni.showModal({
						content: '请选择施工人员',
						showCancel: false,
					})
					return;
				}

				if (_this.remark == '') {
					uni.showModal({
						content: '请填写施工内容',
						showCancel: false,
					})
					return;
				}

				_this.$u.throttle(_this.submitForm(), 3000);

			},

			submitForm() {
				var _this = this;
				_this.setShow = false;
				// 上传图片
				let imgList = _this.imgList;
				let imgIds = [];
				for (var i = 0; i < imgList.length; i++) {
					imgIds.push(imgList[i].imgID)
				}

				// 工人工地,记人工
				if (_this.defaultWorksite.role == 1) {
					_this.workerIds = _this.defaultWorksite.member_id
				}

				var postData = {
					project_id: _this.defaultWorksite.project_id,
					id: _this.id || '',
					add_date: _this.noteDetail.add_date,
					weather: _this.rangeWeather[_this.weatherIndex],
					member_id: _this.workerIds,
					remark: _this.remark,
					imgs: imgIds,
				}

				var urlStr = '/api/project.remark/add_do'
				if (_this.logIds > 0) {
					postData['id'] = _this.logIds;
				}
				postData['address'] = uni.getStorageSync('address');
				postData['lng'] = uni.getStorageSync('longitude');
				postData['lat'] = uni.getStorageSync('latitude');

				_this.$u.post(urlStr, postData).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			// 删除
			delClick() {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确定删除此备注？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.$u.post('/api/project.remark/deleteAll', {
								id: _this.id,
							}).then(res => {
								console.log("==删除备注==");
								console.log(res);
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}).catch(res => {
								console.log(res);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.handleList_box {
		padding: 15rpx 0;
	}

	.handleList_con {
		padding: 15rpx 30rpx;
	}
</style>
